<template>
  <FormModal
    v-model="modalVisible"
    :title="title + '班组'"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRule"
      v-bind="layoutConfig.formLayout"
    >
      
<SectionCard title="资质信息">
 
  <el-button type="primary" size="mini" @click="handleAdd">添加</el-button>
  <el-table
          :data="formData.formKey_767f9"
          style="width: 100%"
          border
          header-cell-style="background: #f4f3f9; color: #606266"
        >
          <el-table-column
          label="序号"
          width="60px"
        >
          <template #default="{$index}">
            <el-form-item label-width="0">
      <span> {{ $index + 1 }} </span>
    </el-form-item>
          </template>
        </el-table-column>
<el-table-column
          label="资质分类"
          
        >
          <template #default="{row,$index}">
                    <el-form-item label-width="0":prop="`formKey_767f9.${$index}.formKey_u133`" :rules="formRule.formKey_u133">
        <el-select style="width:100%" v-model="row.formKey_u133" >
          <el-option key='0' value="0">否</el-option>
          <el-option key='1' value="1">是</el-option>
        </el-select>
        </el-form-item>
          </template>
        </el-table-column>
<el-table-column
          label="资质类型"
          
        >
          <template #default="{row,$index}">
                    <el-form-item label-width="0":prop="`formKey_767f9.${$index}.formKey_u134`" :rules="formRule.formKey_u134">
        <el-input v-model.trim="row.formKey_u134"  />
        </el-form-item>
          </template>
        </el-table-column>
<el-table-column
          label="资质名称"
          
        >
          <template #default="{row,$index}">
                    <el-form-item label-width="0":prop="`formKey_767f9.${$index}.formKey_u135`" :rules="formRule.formKey_u135">
        <el-input v-model.trim="row.formKey_u135"  />
        </el-form-item>
          </template>
        </el-table-column>

        </el-table>
</SectionCard>
<SectionCard title="产品信息">
 
  <el-button type="primary" size="mini" @click="handleAdd">添加</el-button>
  <el-table
          :data="formData.formKey_04dfc"
          style="width: 100%"
          border
          header-cell-style="background: #f4f3f9; color: #606266"
        >
          <el-table-column
          label="序号"
          width="60px"
        >
          <template #default="{$index}">
            <el-form-item label-width="0">
      <span> {{ $index + 1 }} </span>
    </el-form-item>
          </template>
        </el-table-column>
<el-table-column
          label="产品名称"
          
        >
          <template #default="{row,$index}">
                    <el-form-item label-width="0":prop="`formKey_04dfc.${$index}.formKey_u161`" :rules="formRule.formKey_u161">
        <el-input v-model.trim="row.formKey_u161"  />
        </el-form-item>
          </template>
        </el-table-column>
<el-table-column
          label="产品分类"
          
        >
          <template #default="{row,$index}">
                    <el-form-item label-width="0":prop="`formKey_04dfc.${$index}.formKey_u162`" :rules="formRule.formKey_u162">
        <el-select style="width:100%" v-model="row.formKey_u162" >
          <el-option key='0' value="0">否</el-option>
          <el-option key='1' value="1">是</el-option>
        </el-select>
        </el-form-item>
          </template>
        </el-table-column>
<el-table-column
          label="规格/型号"
          
        >
          <template #default="{row,$index}">
                    <el-form-item label-width="0":prop="`formKey_04dfc.${$index}.formKey_u163`" :rules="formRule.formKey_u163">
        <el-input v-model.trim="row.formKey_u163"  />
        </el-form-item>
          </template>
        </el-table-column>

        </el-table>
</SectionCard>
<SectionCard title="供应商信息">
 
    <el-row v-bind="layoutConfig.row">
      <el-col v-bind="layoutConfig.col">
        <el-form-item label="供应商简称" prop="formKey_u120">
        <el-input v-model.trim="formData.formKey_u120"  />
        </el-form-item>
      </el-col>
      <el-col v-bind="layoutConfig.col">
        <el-form-item label="成立日期" prop="formKey_u98">
        <el-date-picker v-model="formData.formKey_u98"  />
        </el-form-item>
      </el-col>
      <el-col v-bind="layoutConfig.col">
        <el-form-item label="注册资本/万元" prop="formKey_u126">
        <el-input v-model.trim="formData.formKey_u126"  />
        </el-form-item>
      </el-col>
    </el-row>
</SectionCard>
    </el-form>
    <div slot="footer" v-if="!isPreview">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="handleOk">
        保存
      </el-button>
    </div>
  </FormModal>
</template>

<script>
const defaultFormData = {"formKey_767f9":[{"formKey_u133":"","formKey_u134":"","formKey_u135":""}],"formKey_04dfc":[{"formKey_u161":"","formKey_u162":"","formKey_u163":""}],"formKey_u120":"","formKey_u98":"","formKey_u126":""};
export default {
  name: "InfoModal",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    mode: {
      type: String,
      default: "add",
    },
    currentInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      layoutConfig: {"formLayout":{"labelSuffix":":","labelWidth":"100px"},"row":{"gutter":20},"col":{"span":8}},
      submitLoading: false,
      formData: {
        ...defaultFormData,
      },
      formRule: {"formKey_u98":[{"required":true,"trigger":"blur","message":"请输入成立日期"}],"formKey_u126":[{"required":true,"trigger":"blur","message":"请输入注册资本/万元"}]},
    };
  },
  computed: {
    modalVisible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    isPreview() {
      return this.mode === "preview";
    },
    title() {
      return this.isPreview ? "查看" : this.mode === "edit" ? "编辑" : "新增";
    },
  },
  watch: {
    value(newVal) {
      if (newVal) {
        this.formData = {
        ...defaultFormData 
        };
      } else {
        this.formData = {
          ...defaultFormData
        };
      }
    },
  },
  methods: {
    async handleOk() {
      try {
        // this.submitLoading = true;
        console.log('formData', this.formData);
        await this.$refs.formRef.validate();
        // const isEdit = !!this.formData.id
        // const remoteMethod = isEdit ? editGroup : addGroup
        // const [err] = await remoteMethod({
        //   ...this.formData,
        // })
        // this.submitLoading = false
        // if (!err) {
        //   this.$message.success(`${isEdit ? '编辑' : '添加'}成功`)
        //   this.$emit('refresh')
        //   this.handleClose()
        // }
      } catch (e) {
        this.submitLoading = false;
        console.error("onSubmit error", e);
      }
    },
    handleClose() {
      this.modalVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.readonly-field {
  padding: 8px 0;
  color: #606266;
}

.el-input__inner {
  border-radius: 4px;
}

.el-form-item {
  margin-bottom: 20px;
}

</style>

/** %fieldMap=[{"label":"资质信息","type":"array","beforeKey":"formKey_767f9","children":[{"label":"资质分类","type":"string","beforeKey":"formKey_u133"},{"label":"资质类型","type":"string","beforeKey":"formKey_u134"},{"label":"资质名称","type":"string","beforeKey":"formKey_u135"}]},{"label":"产品信息","type":"array","beforeKey":"formKey_04dfc","children":[{"label":"产品名称","type":"string","beforeKey":"formKey_u161"},{"label":"产品分类","type":"string","beforeKey":"formKey_u162"},{"label":"规格/型号","type":"string","beforeKey":"formKey_u163"}]},{"label":"供应商简称","type":"string","beforeKey":"formKey_u120"},{"label":"成立日期","type":"string","beforeKey":"formKey_u98"},{"label":"注册资本/万元","type":"string","beforeKey":"formKey_u126"}]% */
